<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="address=no" name="format-detection" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>百度文库</title>
    <link rel="stylesheet" href="" />
    
    <script name="baidu-tc-cerfication" type="text/javascript" charset="utf-8" src="http://172.22.148.57/clouda/static/cloudaapi/lightapp_my.js"></script>
    
    <!--
    <script src="../lib/BlendUI.js"></script>
    -->

    <script src="zepto.js"></script>
    <script src="fastclick.js"></script>
    <link rel="stylesheet" href="style/index.css" />
    <style type="text/css">
    html, body {
        overflow-x:hidden
    }
    #header {
        border-top: rgb(60, 156, 118) solid 1px;
        border-bottom: rgb(26, 128, 85) solid 1px;
        color: rgb(255, 255, 255);
        background: rgb(30, 152, 102);
        width: 100%;
        height: 43px;
        text-align: center;
        font-weight: 600;
        line-height: 44px;
        font-size: 18px;
        position:relative;
    }
    #nav {
        display: block;
    }
    #nav>ul {
        background: rgb(246, 246, 246);
        height: 42px;
        border-top: rgb(215, 215, 215) 1px solid;
        border-bottom: rgb(215, 215, 215) 1px solid;
        display: box;
        display: -webkit-box;
    }
    #nav>ul>li {
        -webkit-box-flex: 1;
        position: relative;
    }
    #nav>ul>li>a {
        font-size: 16px;
        color: rgb(91, 91, 91);
        display: block;
        width: 40px;
        height: 42px;
        line-height: 42px;
        margin: 0 auto;
        text-align: center;
    }
    /*#nav>ul>li.on:after {
        content:"";
        position:absolute;
        bottom:0px;
        left: 50%;
        display: block;
        width: 40px;
        height: 3px;
        margin-left:-20px;
        background: rgb(30, 152, 102);
    }*/
    #nav>ul>li.on>a {
        color: rgb(30, 152, 102);
    }
    .ui-toolbar-toolscon{
        position: absolute;
        color: rgb(255, 255, 255);
        line-height: 30px;
        display: inline-block;
        top: 0;
        right: 5px;
    }
    #navStyle{
        position: absolute;
        width: 20%;
        height: 3px;
        bottom: 0;
        -webkit-transition: .1s linear -webkit-transform;
    }
    #navStyle b{
        display: block;
        width: 40px;
        height: 3px;
        margin: 0 auto;
        background: rgb(30, 152, 102);  
    }
    
    </style>
</head>

<body>
    <header id="header" class="ui-toolbar">
        百度文库
        <div class="ui-toolbar-toolscon">
            <div data-index="0" class="ui-toolbar-btn rightbtn ui-toolbar-searchbtn" style="-webkit-tap-highlight-color: rgba(255, 255, 255, 0);"></div>
            <!-- <div data-index="1" class="ui-toolbar-btn native_app">客户端</div> -->
        </div>
    </header>
    <nav id="nav">
        <ul>
            <li id="first" class="on"><a href="first.html" title="">首页</a>
            </li>
            <li id="top"><a href="top.html" title="">排行</a>
            </li>
            <li id="list"><a href="list.html" title="">分类</a>
            </li>
            <li id="class"><a href="class.html" title="">课程</a>
            </li>
            <li id="one"><a href="one.html" title="">个人</a>
            </li>
        </ul>
        <div id="navStyle" class="ls0"><b></b></div>
    </nav>
    <script type="text/javascript">
    clouda && clouda.lightInit({
        ak:"s84ycaiqlG7OKf3dG0AwozKx",
        module:["blendui"]
    });

    document.addEventListener("blendready",function(){
        FastClick.attach(document.body);
        var main = window.Blend;
        main.api.core.removeSplashScreen();
        var LayerGroup = main.LayerGroup;
        var Layer = main.Layer;
        var layerApi = main.api.layer;
        var tabs = new LayerGroup({
            id: "tab",
            layers: [{
                id: 'first',
                url: 'first.html',
                'autoload': true
            }, {
                id: 'top',
                url: 'top.html',
                'autoload': true
            }, {
                id: 'list',
                url: 'list.html',
                'autoload': true
            }, {
                id: 'class',
                url: 'class.html',
                'autoload': true
            }, {
                id: 'one',
                url: 'one.html',
                'autoload': true
            }],
            onselected: function(event) {
                var id = event['layerId'];
                $("#nav li").removeClass('on');
                $("#" + id).addClass('on');
                $("#navStyle").removeClass().addClass("ls"+ $("#" + id).index())
            },
            /*onscroll:function(event){
                console.log("onscrollonscrollonscroll");
                var offsetPx = event['groupOffset']/5;
                $("#navStyle").css("-webkit-transform","translate("+offsetPx+"px, 0)");
            },*/
            left: 0,
            top: 90
        });
        $("#nav a").click(function(e){
            e.preventDefault();
        });
        $("#nav a").on("click",function(e) {
            e.preventDefault();
            console.log("clickclickclickclick");
            tabs.active($(this).parent()[0].id);
        });

        //集中控制创建contentLayer
        var contentLayer;
        layerApi.on("createContentLayer",function(e){
            var url = null;//e.data.url;
            if(contentLayer){
                //contentLayer.replace(url);
                contentLayer.in();
            }else{
                contentLayer = new Layer({
                    "id":"contentLayer",
                    "url":"content.html",
                    "active":true
                });
            }
        });

        //集中控制创建contentLayer
        var listLayer;
        layerApi.on("createListLayer",function(e){
            var url = null;//e.data.url;
            if(listLayer){
                //contentLayer.replace(url);
                listLayer.in();
            }else{
                listLayer = new Layer({
                    "id":"listLayer",
                    "url":"listContent.html",
                    "active":true
                });
            }
        });

        //退出
        layerApi.on("backPressedBeforeExit",function(e){
            if(window.confirm("确定要退出吗?")){
                main.api.core.exitApp();
            }
        });

        //搜索
        var searchLayer;
        $(".ui-toolbar-toolscon").click(function(e){
            /*if(searchLayer){
                searchLayer.in();
            }else{*/
                searchLayer&&searchLayer.destroy();
                searchLayer = new Layer({
                    "id":"searchLayer",
                    "url":"postLayer.html",
                    "active":true
                });
            /*}*/
        });
    },false);
    
    /*Blend.ready(function(main) {
        alert("ddd");
    });*/
    </script>
</body>

</html>
